/**
 * Created by yantao on 2017/7/10.
 */

class VisitorView extends React.Component {
    constructor(props) {
        super(props);
        this.commLoadComplete = this.commLoadComplete.bind(this);

        this.state = {
            visible: false,
            visitorData: null,
            inputStartDate: '',
            inputEndDate: ''
        };
    }

    commLoadComplete() {
        layui.use(['form', 'laypage', 'laydate'], function () {
            this.form = layui.form();
            this.layer = layui.layer;
            this.layui = layui;
            this.setState({
                inputStartDate: laydate.now(-7, 'YYYY-MM-DD'),
                inputEndDate: laydate.now()
            });

            let start = {
                min: '2017-06-16 23:59:59',
                max: laydate.now(),
                istoday: false,
                isclear: false, //是否显示清空
                issure: false, //是否显示确认
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas; //将结束日的初始值设定为开始日
                    let cur7 = adjustDate(convertString2Date(datas), 7 * 60 * 60 * 24);
                    let now = convertString2Date(laydate.now());
                    // 开始日选好后，重置开始日的最大日期为前第一天
                    end.max = convertDate2String(cur7 > now ? now : cur7, true);
                    this.setState({
                        inputStartDate: datas,
                        inputEndDate: end.max,
                    });
                }.bind(this)
            };

            let end = {
                min: laydate.now(-7, 'YYYY-MM-DD'),
                max: laydate.now(),
                istoday: false,
                isclear: false, //是否显示清空
                issure: false, //是否显示确认
                choose: function (datas) {
                    this.setState({
                        inputEndDate: datas,
                    });
                }.bind(this)
            };

            ReactDOM.findDOMNode(this.refs.refStartDate).onclick = function () {
                start.elem = this;
                laydate(start);
            };
            ReactDOM.findDOMNode(this.refs.refEndDate).onclick = function () {
                end.elem = this
                laydate(end);
            };
            this.queryVisitor();
        }.bind(this));
    }

    showImage(url) {
        if (url !== undefined && url !== '') {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    queryVisitor() {
        let buildingInfo = this.refs.buildingSelectUtils.getData();
        let params = {};
        params.page = 1;
        params.pageSize = 10;
        params.commCode = buildingInfo.commCode;
        params.building = buildingInfo.building;
        params.unit = buildingInfo.unit;
        params.floor = buildingInfo.floor;
        params.room = buildingInfo.room;
        params.startDate = this.refs.refStartDate.value;
        params.endDate = this.refs.refEndDate.value;
        let page = 'page';
        params.type = 'VISITOR_CALL';
        this.updateVisitorList(params, page);
    }

    updateVisitorList(params, page) {
        postJson('/VisitorCtrl/queryVisitorList.x', $.param(params), function (data) {
            this.visitorList = data.data.list;
            this.setState({
                callTBody: ''
            });
            if (params.page === 1) {
                layui.laypage({
                    cont: page
                    , pages: Math.ceil(data.data.size / params.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            params.page = row.curr;
                            this.updateVisitorList(params);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    settCallBody() {
        if (this.visitorList) {
            return this.visitorList.map(function (array) {
                return (<tr>
                    <td>{array.access_device}</td>
                    <td>{array.type === 'VISITOR_CALL' ? '呼叫照片' : '刷卡照片'}
                    </td>
                    <td>{array.visitor_date}</td>
                    <td>
                        {
                            array.called_type === 2 ? '管理处'
                                : array.called_type === 4 ? '[' + array.comm_name + '] ' + array.building_alias + ' ' + array.unit_code + '单元 ' + array.floor_code + array.room_code + '房'
                                : array.called_type === 5 ? '别墅' : array.called_num
                        }
                    </td>
                    <td>
                        {
                            array.image_url ?
                                <button type="button" className="layui-btn layui-btn-primary layui-btn-small"
                                        onClick={() => this.showImage(array.image_url)}>查看图片
                                </button> : "无照片"
                        }
                    </td>
                </tr>);
            }.bind(this));
        }
    }

    render() {
        return <Frame header="通话记录查询">
                <div style={{color: "red", marginBottom: 10}}>
                    <strong style={{color: "blue"}}>Tips：</strong> 访客图片功能需要门口机升级到【1.9.7.131】之后版本
                </div>

                <form className="layui-form layui-form-pane">
                    <div className="layui-form-item">
                        <label className="layui-form-label">起始日期</label>
                        <div className="layui-input-inline">
                            <input className="layui-input" value={this.state.inputStartDate} placeholder="选择日期"
                                   ref="refStartDate"/>
                        </div>

                        <label className="layui-form-label">结束日期</label>
                        <div className="layui-input-inline">
                            <input className="layui-input" value={this.state.inputEndDate} placeholder="选择日期"
                                   ref="refEndDate"/>
                        </div>
                    </div>
                    <div className="layui-form-item">
                        <BuildingSelectUtils ref="buildingSelectUtils" commLoadComplete={this.commLoadComplete}/>
                        <button type="button" className="layui-btn layui-btn-primary"
                                onClick={() => this.queryVisitor()}>查询
                        </button>
                    </div>

                    <div className="layui-form-item">
                        <div className="table-responsive">
                            <table className="tabel layui-table">
                                <colgroup>
                                    <col/>
                                    <col/>
                                    <col/>
                                    <col/>
                                    <col width="100"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>访客信息</th>
                                    <th>类型</th>
                                    <th>日期</th>
                                    <th>被访问信息</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody name="callTBody" id="callTBody">{this.settCallBody()}</tbody>
                            </table>
                        </div>
                        <div id="page">
                        </div>
                    </div>
                </form>
        </Frame>
    }
}

ReactDOM.render(
    <VisitorView/>,
    document.getElementById('example')
);